﻿@page "/components/badge"

<Pager Title="Badge" Description="Documentation and examples for badges, our small count and labeling component." 
Indicates="@(new[]{"Examples","Pill", "Buttons","Positioned"})">
	<Demo Title="Examples">
		<Run>
			<Badge>Primary</Badge>
			<Badge Color="Color.Secondary">Secondary</Badge>
			<Badge Color="Color.Info">Info</Badge>
			<Badge Color="Color.Success">Success</Badge>
			<Badge Color="Color.Danger">Danger</Badge>
			<Badge Color="Color.Warning">Warning</Badge>
			<Badge Color="Color.Light">Light</Badge>
			<Badge Color="Color.Dark">Dark</Badge>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Badge>Primary</Badge>
<Badge Color=""Color.Secondary"">Secondary</Badge>
<Badge Color=""Color.Info"">Info</Badge>
<Badge Color=""Color.Success"">Success</Badge>
<Badge Color=""Color.Danger"">Danger</Badge>
<Badge Color=""Color.Warning"">Warning</Badge>
<Badge Color=""Color.Light"">Light</Badge>
<Badge Color=""Color.Dark"">Dark</Badge>
```
")
		</Code>
	</Demo>
		<Demo Title="Pill">
		<Run>
			<Badge Pill>Primary</Badge>
			<Badge Pill Color="Color.Secondary">Secondary</Badge>
			<Badge Pill Color="Color.Info">Info</Badge>
			<Badge Pill Color="Color.Success">Success</Badge>
			<Badge Pill Color="Color.Danger">Danger</Badge>
			<Badge Pill Color="Color.Warning">Warning</Badge>
			<Badge Pill Color="Color.Light">Light</Badge>
			<Badge Pill Color="Color.Dark">Dark</Badge>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Badge Pill>Primary</Badge>
<Badge Pill Color=""Color.Secondary"">Secondary</Badge>
<Badge Pill Color=""Color.Info"">Info</Badge>
<Badge Pill Color=""Color.Success"">Success</Badge>
<Badge Pill Color=""Color.Danger"">Danger</Badge>
<Badge Pill Color=""Color.Warning"">Warning</Badge>
<Badge Pill Color=""Color.Light"">Light</Badge>
<Badge Pill Color=""Color.Dark"">Dark</Badge>
```
")
		</Code>
	</Demo>
	<Demo Title="Buttons">
		<Run>
			<Button>
				Notification <Badge Color="Color.Danger">20</Badge>
			</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button>
	Notification <Badge Color=""Color.Danger"">20</Badge>
</Button>
```
")
		</Code>
	</Demo>
		<Demo Title="Positioned">
		<Description>
			Use <code>CssClass</code> to modify a badge and position it in the corner of a link or button.
		</Description>
		<Run>
			<Button CssClass="Css.Class.Position(Position.Relative)">
				Inbox
				<Badge CssClass="Css.Class.Position(Position.Absolute).AtPosition(PositionKey.Top, PositionValue.Is0).AtPosition(PositionKey.Start,PositionValue.Is100).TranslateMiddle().BorderRadius(BorderRadius.Pill).BgColor(BgColor.Danger)">
					99+	
					<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">unread</Element>	
				</Badge>
			</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Color=""Color.Secondary"" CssClass=""Css.Class.Position(Position.Relative)"">
	Inbox
	<Badge CssClass=""Css.Class.Position(Position.Absolute).AtPosition(PositionKey.Top, PositionValue.Is0).AtPosition(PositionKey.Start,PositionValue.Is100).TranslateMiddle().BorderRadius(BorderRadius.Pill).BgColor(BgColor.Danger)"">
		99+				
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()"">unread</Element>		
	</Badge>
</Button>
```
			")
		</Code>
	</Demo>
	<Demo>
				<Run>
			<Button CssClass="Css.Class.Position(Position.Relative)">
				Profile
				<Badge Color="Color.Danger" CssClass="Css.Class.Position(Position.Absolute).AtPosition(PositionKey.Top, PositionValue.Is0).AtPosition(PositionKey.Start, PositionValue.Is100).TranslateMiddle().BorderRadius(BorderRadius.Circle).Border().BorderColor(Color.Light).Padding(SpaceNum.Two2)">
					<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">unread</Element>	
				</Badge>
			</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button CssClass=""Css.Class.Position(Position.Relative)"">
	Inbox
	<Badge Color=""Color.Danger"" CssClass=""Css.Class.Position(Position.Absolute).AtPosition(PositionKey.Top, PositionValue.Is0).AtPosition(PositionKey.Start, PositionValue.Is100).TranslateMiddle().BorderRadius(BorderRadius.Circle).Border().BorderColor(Color.Light).Padding(SpaceNum.Two2)"">
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()""></Element>	
	</Badge>
</Button>
```
			")
		</Code>
	</Demo>
</Pager>